<template>
  <div>
    <Navigation></Navigation>
    <div class="home">
      <div class="left">
        <div class="chat">
          通讯录
          <el-tooltip
            class="item"
            effect="dark"
            content="添加好友"
            placement="top"
          >
            <el-button
              style="margin-left: 65%"
              type="primary"
              size="mini"
              icon="el-icon-plus"
            ></el-button>
          </el-tooltip>
        </div>
        <div class="search">
          <el-input
            placeholder="请输入内容"
            prefix-icon="el-icon-search"
            v-model="keywords"
            clearable
            maxlength="10"
            show-word-limit
          >
          </el-input>
        </div>
        <div class="user" v-for="item in friendList" :key="item.id">
          <div class="avatar">
            <el-avatar :src="item.avatar"></el-avatar>
          </div>
          <div class="username">
            <div style="font-size: 15px">
              {{ item.username }}
              <span
                style="
                  position: absolute;
                  right: 15px;
                  font-size: 20px;
                  top: -10px;
                "
              >
                <el-popover placement="bottom" width="200" trigger="click">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="发送消息"
                    placement="top"
                  >
                    <el-button
                      @click="sendMsg(item.cid)"
                      type="success"
                      icon="el-icon-chat-dot-round"
                      circle
                    ></el-button>
                  </el-tooltip>
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="朋友详情"
                    placement="top"
                  >
                    <el-button
                      @click="profile(item.cid)"
                      type="primary"
                      icon="el-icon-user"
                      circle
                    ></el-button>
                  </el-tooltip>
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="添加星标朋友"
                    placement="top"
                  >
                    <el-button
                      @click="addStar(item.cid)"
                      type="warning"
                      icon="el-icon-star-off"
                      circle
                    ></el-button>
                  </el-tooltip>
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="删除"
                    placement="top"
                  >
                    <el-button
                      @click="deleteFriend(item.cid)"
                      type="danger"
                      icon="el-icon-delete"
                      circle
                    ></el-button>
                  </el-tooltip>
                  <i slot="reference" class="el-icon-more-outline"></i>
                </el-popover>
              </span>
            </div>
            <div style="font-size: 12px; color: #909399; margin-top: 2px">
              {{ item.phone }}
              <i
                v-if="item.state === 2"
                @click="cancelStar(item.cid)"
                style="
                  position: absolute;
                  right: 15px;
                  font-size: 18px;
                  top: 30px;
                  color: orange;
                "
                class="el-icon-star-on"
              ></i>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <!-- <div class="header">
               <div class="right-avatar">
                     <el-avatar src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg"></el-avatar>
                </div>
                <div class="right-username">
                    <div style="font-size:15px;">张三</div>
                    <div style="font-size:12px;color:#909399;margin-top: 2px;">正在输入中。。。</div>
                </div>
                <div class="right-icon">
                    <el-button size="small " type="primary" icon="el-icon-phone"></el-button>
                    <el-button size="small " type="success" icon="el-icon-phone-outline"></el-button>
                    <el-popover
                        placement="bottom"
                        width="200"
                        trigger="click"
                        >
                        <el-tooltip class="item" effect="dark" content="发送消息" placement="top">
                            <el-button @click="sendMsg()" type="success" icon="el-icon-chat-dot-round" circle></el-button>
                        </el-tooltip>
                            <el-tooltip class="item" effect="dark" content="朋友详情" placement="top">
                            <el-button @click="profile()" type="primary" icon="el-icon-user" circle></el-button>
                        </el-tooltip>
                            <el-tooltip class="item" effect="dark" content="添加星标朋友" placement="top">
                            <el-button @click="addStar()" type="warning" icon="el-icon-star-off" circle></el-button>
                        </el-tooltip>
                            <el-tooltip class="item" effect="dark" content="删除" placement="top">
                            <el-button @click="deleteChat()" type="danger" icon="el-icon-delete" circle></el-button>
                        </el-tooltip>
                        <el-button style="margin-left:10px;" slot="reference" size="small " type="info" icon="el-icon-more"></el-button>
                    </el-popover>
                </div>
           </div>
           <div class="content">
               <div class="message-left" v-for="item in msgList" :key="item.id">
                   <div class="message-avatar">
                        <el-avatar :src="item.avatar"></el-avatar>
                    </div>
                    <div class="message-username">
                        <div style="font-size:12px;">{{item.username}}</div>
                        <div class="msg-content">{{item.content}}</div>
                        <div style="font-size:12px;color:#909399;margin:5px;font-style: italic;">{{item.date}}</div>
                    </div>
               </div>
               <div class="message-right" v-for="item in msgList" :key="item.id">
                    <div class="message-username">
                        <div style="font-size:12px;text-align: right;">{{item.username}}</div>
                        <div style="height:100%;">
                            <div class="msg-content" style="background-color: #95ec69;float:right;">{{item.content}}</div>
                        </div>
                        <div style="font-size:12px;color:#909399;margin:5px;margin-top:-12px;font-style: italic;text-align: right;">{{item.date}}</div>
                    </div>
                     <div class="message-avatar" style="text-align: right;">
                        <el-avatar :src="item.avatar"></el-avatar>
                    </div>
               </div>
           </div>
           <div class="footer">
                <input class="input" placeholder="按 Enter 发送" v-model="content" :rows="1" @keyup="onKeyup">
                <el-button class="icon" type="info" icon="el-icon-paperclip icon" circle></el-button>
                <el-button class="icon" type="primary" icon="el-icon-microphone icon" circle></el-button>
                <el-button class="icon" type="success" icon="el-icon-s-promotion icon" circle></el-button>
           </div> -->
      </div>
    </div>
    <el-drawer size="20%" :visible.sync="profileVisible" :with-header="false">
      <div>
        <el-avatar
          style="margin-left: 38%; margin-top: 10%"
          :size="100"
          :src="user.avatar"
        ></el-avatar>
        <div style="text-align: center; font-size: 18px; margin-top: 10px">
          {{ user.username }}
        </div>
        <div style="margin-top: 20px; border-top: 2px solid #ebeef5">
          <div style="margin: 10px; font-size: 16px; color: #909399">
            个性签名
          </div>
          <div style="margin: 10px; font-size: 14px">
            世上无难事，只怕有心人
          </div>
        </div>
        <div style="margin-top: 20px; border-top: 2px solid #ebeef5">
          <div style="margin: 10px; font-size: 16px; color: #909399">
            手机号
          </div>
          <div style="margin: 10px; font-size: 14px">
            {{ user.phone }}
          </div>
        </div>
        <div style="margin-top: 20px; border-top: 2px solid #ebeef5">
          <div style="margin: 10px; font-size: 16px; color: #909399">相册</div>
          <div class="demo-image__preview">
            <el-image
              v-for="(item, index) in imgList"
              :key="item.id"
              :style="{ marginLeft: index == 0 ? '10px' : '0' }"
              class="preImage"
              :src="item.src"
              :preview-src-list="srcList"
            >
            </el-image>
          </div>
        </div>
        <div style="margin-top: 20px; border-top: 2px solid #ebeef5">
          <div style="margin: 10px; font-size: 16px; color: #909399">城市</div>
          <div style="margin: 10px; font-size: 14px">西安市</div>
        </div>
        <div style="margin-top: 20px; border-top: 2px solid #ebeef5">
          <el-switch
            style="margin: 10px; color: black"
            :v-model="true"
            inactive-text="拉黑他"
          >
          </el-switch>
          <el-switch
            style="margin: 10px; color: black"
            :v-model="true"
            inactive-text="不看他"
          >
          </el-switch>
          <el-switch
            style="margin: 10px; color: black"
            :v-model="true"
            inactive-text="不让他看我"
          >
          </el-switch>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import Navigation from "../components/Navigation.vue";
import {
  addStarFriend,
  cancelStarFriend,
  delFriend,
  getFriendList,
} from "@/api/friend";
import { getUserProfile } from "@/api/user";
import {updateMsgType} from "@/api/message";
export default {
  name: "Contacts",
  components: {
    Navigation,
  },
  data() {
    return {
      profileVisible: false,
      keywords: "",
      content: "",
      friendList: [],
      user: {},
      url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      srcList: [
        "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
        "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
      ],
      imgList: [
        {
          id: "001",
          src: "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
        },
        {
          id: "002",
          src: "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
        },
        {
          id: "003",
          src: "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
        },
        {
          id: "004",
          src: "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
        },
      ],
    };
  },
  created() {
    this.getFriendList();
  },
  methods: {
    getFriendList() {
      let data = {
        cid: this.$cookies.get("cid"),
      };
      getFriendList(data)
        .then((res) => {
          this.friendList = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    sendMsg(cid) {
      //发送消息,创建聊天记录表
        let message = {
            toUserId: cid,
            formUserId: this.$cookies.get("cid"),
            chatType: 1,
        };
        updateMsgType(message).then((res)=>{
            if (res.code === 200){
                this.$router.push({
                    name:'Chat',
                    params:{
                        cid:cid
                    }
                })
            }
        }).catch(err=>{
            console.log(err);
        })
    },
    profile(friendId) {
      //朋友详情
      this.profileVisible = true;
      let data = {
        cid: friendId,
      };
      getUserProfile(data)
        .then((res) => {
          this.user = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //取消星标
    cancelStar(friendId) {
      let data = {
        userId: this.$cookies.get("cid"),
        friendId: friendId,
      };
      cancelStarFriend(data)
        .then((res) => {
          if (res.code === 200) {
            this.$message.success(res.msg);
            this.getFriendList();
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //添加星标朋友
    addStar(friendId) {
      let data = {
        userId: this.$cookies.get("cid"),
        friendId: friendId,
      };
      addStarFriend(data)
        .then((res) => {
          if (res.code === 200) {
            this.$message.success(res.msg);
            this.getFriendList();
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    deleteFriend(friendId) {
      //删除
      let data = {
        userId: this.$cookies.get("cid"),
        friendId: friendId,
      };
      this.$confirm("是否删除此好友?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delFriend(data)
            .then((res) => {
              if (res.code === 200) {
                this.$message.success(res.msg);
                this.getFriendList();
              } else {
                this.$message.error(res.msg);
              }
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //发送消息
    onKeyup(e) {
      if (e.keyCode === 13 && this.content.length) {
        this.content = "";
      }
    },
  },
  watch: {
    //用户名搜索
    keywords(value) {
      if (value == "") {
        this.getFriendList();
      } else {
        this.friendList = this.friendList.filter((e) =>
          e.username.includes(value)
        );
      }
    },
  },
};
</script>

<style scoped>
.home {
  margin: 12px;
  margin-left: 114px;
  display: flex;
  height: calc(100vh - 1.9rem);
}
.left {
  flex: 1;
  background-color: #fff;
  border-radius: 10px;
  margin-top: 5px;
}
.right {
  flex: 4.5;
  margin-top: 5px;
  margin-left: 10px;
  background-color: #ebebeb;
  border-radius: 10px;
}
.search {
  margin: 10px;
}
.user {
  display: flex;
  padding-bottom: 10px;
  padding-top: 10px;
  border-bottom: 1px solid #e4e7ed;
  cursor: pointer;
}
.user:hover {
  background-color: #ebeef5;
}
.user .username span {
  opacity: 0;
}
.user:hover .username span {
  opacity: 1;
}
.avatar {
  flex: 1;
  text-align: center;
}
.username {
  flex: 4;
  position: relative;
}
.preImage {
  width: 80px;
  height: 80px;
  margin: 8px;
}
.header {
  display: flex;
  margin-top: 10px;
  padding-bottom: 10px;
  border-bottom: 2px solid #dcdfe6;
}
.right-avatar {
  flex: 1;
  text-align: center;
}
.right-username {
  flex: 18;
}
.right-icon {
  flex: 3;
  text-align: center;
  margin: 5px;
}
.content {
  width: 100%;
  height: 773px;
  overflow: hidden;
  overflow-y: visible;
  border-bottom: 2px solid #dcdfe6;
}
.message-left {
  display: flex;
  margin: 10px;
}
.message-avatar {
  flex: 1;
}
.message-username {
  flex: 28;
}
.message-right {
  display: flex;
  margin: 10px;
  margin-top: 35px;
}
.msg-content {
  background-color: #fff;
  font-size: 16px;
  line-height: 25px;
  border-radius: 5px;
  margin-top: 5px;
  padding: 8px 10px 8px 10px;
  max-width: 800px;
  min-height: 22px;
  width: fit-content;
}
.footer {
  margin-top: 5px;
  background-color: #fff;
  height: 55px;
  border-radius: 10px;
}
.input {
  padding: 15px;
  /* height: 100%; */
  font-size: 16px;
  width: 1270px;
  border: none;
  outline: none;
  font-family: "Micrsofot Yahei";
  resize: none;
  border-radius: 5px;
}
.chat {
  margin: 20px;
  font-weight: bolder;
  font-size: 16px;
}
</style>
